<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{padding: 40px;}
	#div1{background-color: red}
	#div2{background-color: blue}
	#div3{background-color: green;position: absolute;left: 300px;top: 180px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');
		var oDiv3 = document.getElementById('div3');
	/*
		oDiv3.onclick = function (){
			alert(this.id);		//div3
		}
	*/

/*
	事件冒泡：当一个元素接受到事件的时候，会把它接受到的所有传播给它的父级，一直到顶层的window--事件冒泡机制

		1. 只跟HTML中的结构有关（确定子父级关系）
		2. 不受css样式影响（即使div3绝对定位了）
		3. 即使较近的父级没有添加事件函数（该元素还是可以接受事件，只是没有绑定事件函数，所以即使接收并不做事），也不会影响更高的父级接受事件函数（如把oDiv2的事件移除，点击div3时div1仍可正常弹出）
*/		
		//事件 = 事件函数
		oDiv1.onclick = fn;		//div1
		oDiv2.onclick = fn;		//div2、div1
		oDiv3.onclick = fn;		//div3、div2、div1

		function fn(){
			alert( this.id );
		}
	}
	</script>
</head>
<body>
	<div id="div1">
		<div id="div2">
			<div id="div3"></div>
		</div>
	</div>
</body>
</html>